<template>
	<view class="con">
		<view class="con__box u-flex u-flex-y-center u-flex-between">
			<view class="con__box__label">
				反馈类型
			</view>
			<view class="u-flex u-flex-y-center" @click="show=true">
				<!-- <input class="con__box__inp" disabled type="text" placeholder="内容问题/功能问题"
					placeholder-style="color:#999;font-size:32rpx;" /> -->
				<view class="con__box__inp">
					<view class="" style="color:#999;font-size:32rpx;" v-if="!type">
						内容问题/功能问题
					</view>
					<view class="" v-else>
						{{type}}
					</view>
				</view>
				<image src="/static/detail/xyz.png" class="con__box__more" mode=""></image>
			</view>
		</view>
		<view class="con__box">
			<view class="con__box__label">
				反馈类型
			</view>
			<u--textarea v-model="value1" placeholder="请输入" :focus='false' count maxlength='3000' border='none'
				height='290rpx' placeholderStyle='color:#999999;font-size:32rpx;'></u--textarea>
			<view class="u-flex u-flex-y-center">
				<view class="con__box__upbox">
					<image src="/static/mine/shangchuan.png" class="con__box__upbox__icon" mode=""></image>
					添加
				</view>
			</view>
		</view>
		<view class="con__box u-flex u-flex-y-center u-flex-between">
			<view class="con__box__label">
				联系方式（选填）
			</view>
			<view class="u-flex u-flex-y-center">
				<input class="con__box__inp" type="text" placeholder="请输入您的手机号"
					placeholder-style="color:#999;font-size:32rpx;" />
			</view>
		</view>
		<view class="footer">
			<u-button :loading='loading' @click="submit" loadingText='正在提交' text="提交反馈" color="#51CAEF"
				class="custom-style"></u-button>
		</view>
		<u-action-sheet :actions="list" @close="show=false" @select='select' round='20rpx' :closeOnClickOverlay="true" :closeOnClickAction="true" safeAreaInsetBottom :title="title" :show="show"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: '',
				loading: false,
				show: false,
				list: [{
						name: '内容问题',
					},
					{
						name: '功能问题',
					},
				],
				title:'反馈类型',
				type:''
			};
		},
		methods: {
			submit() {

			},
			select(e){
				// console.log(e)
				this.type=e.name
			}
		}
	}
</script>

<style lang="scss">
	.con {
		padding: 16rpx 24rpx;

		&__box {
			padding: 30rpx 24rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-bottom: 24rpx;

			&__label {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				line-height: 44rpx;
			}

			&__inp {
				width: 388rpx;
				height: 44rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #333;
				line-height: 44rpx;
				font-size: 32rpx;
				text-align: right;
			}

			&__more {
				width: 52rpx;
				height: 52rpx;
			}

			&__upbox {
				width: 160rpx;
				height: 160rpx;
				background: rgba(81, 202, 239, 0.06);
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 2rpx dashed #51CAEF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #51CAEF;
				line-height: 34rpx;
				flex-direction: column;

				&__icon {
					width: 52rpx;
					height: 52rpx;
				}
			}
		}
	}

	.u-textarea {
		padding: 24rpx 0;
	}

	.uni-textarea-placeholder {
		font-size: 32rpx;
	}

	/deep/.u-textarea__field {
		font-size: 32rpx !important;
	}

	.footer {
		width: 702rpx;
		padding: 24rpx 24rpx 68rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
	}
</style>